<template>
  <div class="invoice-container">
    <!-- 正在开票 -->
    <div class="invoice_div1" v-if="!isSuccessInvoice">
      <p style="color: #666;">最大可开票金额：{{ $route.query.maxAmt }} 元</p>
      <div class="invoce_number">
        <span>开票金额：</span>
        <div class="invoce_number_input">
          <van-field
            placeholder="请输入金额"
            ref="fieldRef"
            v-model="currentAmt"
            @click="handleInput"
          />
          <span>元</span>
        </div>
      </div>
      <!-- 表单校验提示信息 -->
      <p class="validate_message">{{ validateMessage }}</p>
      <van-button type="info" @click="handleSbmit" size="small"
        >确认开票</van-button
      >
    </div>
    <!-- 开票成功 -->
    <div class="invoice_div2" v-if="isSuccessInvoice">
      <div class="success_icon">
        <van-icon name="success" />
      </div>
      <p class="success_title">开票成功</p>
      <p class="success_no">订单编号：{{ $route.query.orderNo }}</p>
      <p class="success_amt">开票金额：{{ currentAmt }}元</p>
      <div class="success_tip">
        请向加油员出示该页面<span>线下领取</span>发票
      </div>
    </div>

    <!-- 数字键盘 -->
    <van-number-keyboard
      :class="{ disabled: isInvoiceAmtOfTrue }"
      v-model="currentAmt"
      :show="showKeyboard"
      theme="custom"
      close-button-text="确认"
      extra-key="."
      :hide-on-click-outside="true"
      @input="$refs.fieldRef.blur()"
      @close="onCloseKeyboard()"
    />
  </div>
</template>
<script>
import Vue from "vue";
import { Button, Icon, Field, NumberKeyboard } from "vant";

Vue.use(Button);
Vue.use(Icon);
Vue.use(Field);
Vue.use(NumberKeyboard);

export default {
  head() {
    return {
      title: "开票"
    };
  },
  data() {
    return {
      isSuccessInvoice: false,
      currentAmt: "", // 当前本次开的金额
      maxAmt: 60, // 最大可开金额
      //   orderNo: "XXXXXXXXXXXX", //  订单编号
      //   orderAmt: "xxxx", // 订单金额
      validateMessage: "", // 校验信息
      showKeyboard: false, // 数字键盘
      isInvoiceAmtOfTrue: false // 输入金额是否通过
    };
  },
  created() {
    console.log("invoce---routes", this.$route);
    console.log(this);
  },
  watch: {
    currentAmt(val) {
      const reg = /^(\d+)(\.\d{1,2})?$/;
      const maxInvoiceAmt = Number(this.$route.query.maxAmt);
      let currentamt = Number(val.trim());
      if (currentamt <= 0) return (this.validateMessage = "金额不能小于等于0");
      if (currentamt > maxInvoiceAmt)
        return (this.validateMessage = "不能超过可开票的最大金额");
      if (!reg.test(currentamt))
        return (this.validateMessage = "金额最多保留两位小数点");
      if (Number.isNaN(currentamt))
        return (this.validateMessage = "请输入有效数字");
      this.validateMessage = "";

      console.log(reg.test(currentamt));
    }
  },
  methods: {
    handleInput() {
      this.showKeyboard = true;
    },
    // 确认开票
    handleSbmit() {
      let amt = this.currentAmt.trim();
      if (!amt) {
        this.validateMessage = "请输入金额";
        return (this.showKeyboard = true);
      }
      console.log("正在进行开票");
      console.log(this.currentAmt);
      this.$axios
        .$post("/goToInvoice", {
          invoiceAmount: Number(this.currentAmt),
          orderNo: this.$route.query.orderNo
        })
        .then(res => {
          console.log(res);
          this.isSuccessInvoice = true;
          this.showKeyboard = false;
        });
    },
    onCloseKeyboard() {
      this.showKeyboard = false;
    }
  }
};
</script>
<style lang="scss">
.invoice-container {
  width: 100vw;
  .invoice_div1 {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    p {
      font-size: 0.3rem;
    }
    .validate_message {
      color: red;
      font-size: 0.28rem;
    }
    .invoce_number {
      display: flex;
      align-items: center;
      .invoce_number_input {
        display: flex;
        align-items: center;
        .van-field {
          border: 1px solid #ddd;
          margin-right: 0.2rem;
          padding: 7px 15px;
        }
      }
      input {
        width: 2rem;
        height: 0.4rem;
      }
    }
  }
  button {
    margin-top: 1.5rem;
    padding: 0.1rem 0.4rem;
  }
  .invoice_div2 {
    text-align: center;
    .success_icon {
      width: 2rem;
      height: 2rem;
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      background: limegreen;
      color: #fff;
      margin: 1.5rem auto 0.5rem auto;
      font-size: 1.5rem;
      border-radius: 50%;
    }
    .success_title {
      font-size: 0.28rem;
      margin-bottom: 1rem;
    }
    .success_no {
      font-size: 0.3rem;
    }
    .success_amt {
      font-size: 0.3rem;
    }
    .success_tip {
      font-size: 0.35rem;
      font-weight: 600;
      span {
        color: #1989fa;
      }
    }
  }

  // 数字键盘
  .van-number-keyboard {
    .disabled {
      background-color: #999;
    }
  }
}
</style>
